<template>
	<view style="width: 100%;">
		<view class="screen-bar" :style="{ 'height': height + 'rpx', backgroundColor: bgcolor }">
			<view class="screen-bar-item" @tap.stop="itemClick(index)" v-for="(item, index) in updateArr" :key="index"
				:style="{ 'width': (100 / listArr.length) + '%', 'fontSize': barFontSize + 'rpx', 'color': (currentIndex == index && show) ? activeColor : barTextColor }">
				<view class="bar-item-text">
					{{ item.label }}
				</view>
				<svg-icon :svgPath="item.iconPath" :color="(currentIndex == index && show) ? activeColor : barTextColor"
					size="14px" style="margin-top: 1px;" />
			</view>
			<view class="dropdown-box"
				:style="{ 'top': 44 + 'px', backgroundColor: bgcolor, 'opacity': show ? '1' : '0', 'display': show ? 'block' : 'none' }">
				<scroll-view scroll-y="true" style="max-height: 50vh;">
					<slot name="content"></slot>
				</scroll-view>
				<view class="footer-box">
					<view class="footer-content">
						<view class="reset-btn" @click="reset">重置</view>
						<view class="confirm-btn" @click="confirm">确定</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bg-mask" :class="[show ? 'bg-mask-show' : '']" @tap="maskClose" @touchmove="touchControl"></view>
	</view>

</template>

<script>
/**
 *  下拉组件
 * @author xzj
 * @create date 2021-4-3
 * @update user xzj
 * @update date 2021-4-3
 * @note 遮罩层级98 筛选条&下拉层层级99
 **/
export default {
	name: 'com-dropdown-screen',
	data() {
		return {
			currentIndex: 0,
			currentSubIndex: 0,
			show: false,
			updateArr: [],
			arrBase64: ''
		};
	},
	computed: {
		maxDropdownLength() {
			return this.itemArr[this.currentIndex].length > this.maxItemCount ? this.maxItemCount : this.itemArr[this
				.currentIndex].length
		}
	},
	props: {
		// 筛选条高度 （rpx）
		height: {
			type: Number,
			default: 88
		},
		// 下拉单项高度
		itemHeight: {
			type: Number,
			default: 70
		},
		// 当前文字活跃颜色
		activeColor: {
			type: String,
			default: '#0377fc'
		},
		//背景颜色
		bgcolor: {
			type: String,
			default: '#fff'
		},
		//下拉标题数组
		listArr: {
			type: Array,
			default: () => {
				return ['冰度', '甜度', '加料', '配送距离']
			}
		},
		// item数量超过多少开始滚动
		maxItemCount: {
			type: Number,
			default: 5
		},
		//下拉选项数组（二维数组）
		itemArr: {
			type: Array,
			default: () => {
				return [
					[{
						text: '加冰',
						value: 1
					}, {
						text: '去冰',
						value: 2
					}],
					[{
						text: '三分糖',
						value: 3
					}, {
						text: '五分糖',
						value: 4
					}, {
						text: '七分糖',
						value: 5
					}, {
						text: '全糖',
						value: 6
					}],
					[{
						text: '珍珠',
						value: 7
					}, {
						text: '椰果',
						value: 8
					}, {
						text: '布丁',
						value: 9
					}, {
						text: '水',
						value: 10
					}],
					[{
						text: '1KM',
						value: 11
					}, {
						text: '10KM以内',
						value: 12
					}]
				]
			}
		},
		// 选项左偏移
		itemPadding: {
			type: Number,
			default: 24
		},
		// 能否遮罩关闭
		maskTouch: {
			type: Boolean,
			default: true
		},
		// 是否需要选择后替换标题
		isNeedChangeTitle: {
			type: Boolean,
			default: true
		},
		// 标题字号
		barFontSize: {
			type: Number,
			default: 28
		},
		//标题颜色
		barTextColor: {
			type: String,
			default: '#666'
		},
		//下拉字号
		itemFontSize: {
			type: Number,
			default: 28
		},
		// 下拉文字颜色
		itemTextColor: {
			type: String,
			default: '#666'
		},
		// 需要展示的字段，比如你的数据是item.name 这里填的就是name
		showTag: {
			type: String,
			default: 'text'
		},
		// 是否要滑动关闭
		isTouchPrevent: {
			type: Boolean,
			default: true
		},
		// 自定义事件的索引数组
		customIndexArr: {
			type: Array,
			default: () => {
				return []
			}
		}
	},
	mounted() {
		this.updateArr = [...new Set(this.listArr)]
	},
	methods: {
		confirm() {
			this.maskClose()
			this.$emit('confirm')
		},
		reset() {
			this.maskClose()
			this.$emit('reset')
		},
		itemClick(index) {
			this.$emit('tabClick', {
				'index': index
			})
			if (this.customIndexArr.includes(index)) {
				console.log('自定义事件')
				this.show = false
				this.$emit('customClick', {
					'$index': index
				})
				return
			}
			if (this.currentIndex == index) {
				this.show = !this.show
			} else {
				this.currentIndex = index
				this.show = true
			}
		},
		subItemClick(index) {
			this.currentSubIndex = index
			if (this.isNeedChangeTitle) {
				this.updateArr.splice(this.currentIndex, 1, this.itemArr[this.currentIndex][this.currentSubIndex][this
					.showTag
				])
			}
			this.$emit('finish', {
				'$index': this.currentIndex,
				...this.itemArr[this.currentIndex][this.currentSubIndex]
			})
			this.show = false
		},
		maskClose() {
			if (!this.maskTouch) return
			this.show = false
		},
		//
		touchControl() {
			if (this.isTouchPrevent) {
				this.maskClose()
			}
		}
	}
}
</script>

<style scoped lang="scss">
.screen-bar {
	width: 100%;
	display: flex;
	position: relative;
	z-index: 99;
}

.screen-bar::after {
	position: absolute;
	content: '';
	width: 100%;
	height: 1rpx;
	background-color: #EEEEEE;
	bottom: -1rpx;
	left: 0;
	z-index: 99;
}

.screen-bar-item {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.screen-bar-item image {
	width: 24rpx;
	height: 24rpx;
	display: block;
	margin-left: 12rpx;
	transition: all .3s;
	flex-shrink: 0;
}

.dropdown-box {
	width: 100%;
	position: absolute;
	left: 0;
	z-index: 99;
	overflow: hidden;
	max-height: calc(50vh + 70px);
}

.dropdown-item {
	width: 100%;
	display: flex;
	align-items: center;
	padding: 0 30rpx;
	box-sizing: border-box;
	font-size: 28rpx;
	color: #111111;
	border-bottom: 1rpx solid #EEEEEE;
}

.bg-mask {
	position: fixed;
	top: calc(var(--status-bar-height) + 44px);
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 98;
	transition: all 0.3s ease-in-out;
	opacity: 0;
	visibility: hidden;
}

.bg-mask-show {
	visibility: visible;
	opacity: 1;
}

.bar-item-text {
	max-width: 120rpx;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	margin-right: 2px;
}

.footer-content {
	display: flex;
	justify-content: space-between;
	padding: 13px 32rpx;
	box-shadow: 0px 0px 12rpx  rgba(0, 0, 0, 0.1);
	> view {
		width: 328rpx;
		height: 44px;
		line-height: 44px;
		text-align: center;
		font-size: 30rpx;
		font-weight: 500;
		border-radius: 12rpx;
	}
	.reset-btn {
		color: rgba(12, 16, 25, 1);
		background: rgba(247, 248, 250, 1);
	}
	.confirm-btn {
		color: rgba(255, 255, 255, 1);
		background: rgba(77, 172, 177, 1);
	}

}
</style>
